<template lang="pug">
.user-page-wrapper
  .avatar
    img.img(:src="headimgurl")
  .login
    cube-button.button(:primary="true" @click="loginedToggle") {{loginCaption}}
  ul.table(v-if="user")
    li.name.row(v-if="user.name")
      .caption 昵称：
      .text {{user.name}}
    li.sex.row(v-if="user.sex>=0")
      .caption 性别：
      .text {{gender}}
    li.country.row(v-if="user.country")
      .caption 国家：
      .text {{user.country}}
    li.province.row(v-if="user.province")
      .caption 省：
      .text {{user.province}}
    li.city.row(v-if="user.city")
      .caption 市：
      .text {{user.city}}
</template>

<script>
import {clearUserToLocalStorage,
        getUserFromLocalStorage,
        setUserToLocalStorage,
        requestUserInfoToWX,
        getUserFromCookie,
        clearUserToCookie} from '../../static/lib/wxauth'
import {setInitialTabIndexToLocalStorage} from '../../static/lib/ui'
import {mapState} from 'vuex'

export default {

  props: {

    tabIndex: {
      type: Number,
      default() {
        return 0
      }
    }

  },

  data() {

    return {
      sellerId: 0,
      // user: {"name": "行者木",
            // "openid": "123",
            // "sex":1,
            // "country":"中国",
            // "province":"湖北省",
            // "city":"武汉市",
            // "avatar": "http://thirdwx.qlogo.cn/mmopen/vi_32/7N2fSRmJicV5LvRawHBXQSaD1bOibAbHLFkt4u0JEIxxkT2sSz6PKyBcf2erxPQAREmicg2ZbtSiciclBkyaiaQhRNLA/132"}
            // }
    }

  },

  computed: {
    
    // 全局变量
    ...mapState({
      // 用户
      user: 'user'
    }),

    logined() {
      return this.user && this.user.openid
    },

    loginCaption() {
      return this.logined?'注销':'登陆'
    },

    headimgurl() { 
      return this.logined ? this.user.avatar : require("./unlogin.png")
    },

    gender() {
      if(this.user) {
        switch(this.user.sex) {
          case 0: 
            return '未知'
            break;
          case 1: 
            return '男'
            break;
          case 2: 
            return '女'
            break;
          default:
            return '未知'
        }
      }else
        return '未知'
    }
  },

  methods: {

    loginedToggle() {
      
      console.log(this.logined)

      if(this.logined) {
        clearUserToLocalStorage(this.sellerId)
        clearUserToCookie(this.sellerId)
        this.$store.commit('SET_USER', null)
      }else {
        this.user = getUserFromLocalStorage(this.sellerId)
        if(!this.user) {
          const returnUrl = window.location.href
          // 将user页的页码存入localStorage，后端跳转到returnUrl时，跳转到user页
          setInitialTabIndexToLocalStorage(this.sellerId,this.tabIndex)
          this.user = requestUserInfoToWX(this.sellerId,returnUrl)
        }
      }
      
    }

  },

  components: {

  },

  async mounted() {
    console.log('进入mounted')

    //- 用vue的route对象从url中获取查询参数
    this.sellerId = this.$route.query.id

    let buyer = getUserFromLocalStorage(this.sellerId)

    if(!(buyer)) {
      buyer = getUserFromCookie(this.sellerId)
      setUserToLocalStorage(this.sellerId,buyer)
      this.$store.commit('SET_USER', buyer)

    }

  }

}
</script>

<style lang="stylus" scoped>
@import "../../static/common/stylus/variable"

.user-page-wrapper
  .avatar
    margin-top:20px
    text-align:center
    .img
      width:100px
      height:100px
      border-radius:50%
  .login
    margin-top:10px
    text-align:center
    .button
      display:inline-block
      width:200px
      height: 30px
      padding:4px
    >>> .cube-btn-primary
      background:$color-blue
  .table
    margin-top:15px
    .row
      font-size:$fontsize-large
      height:30px
      .caption
        display:inline-block
        margin-left:130px
        width:50px
      .text
        display:inline-block
        margin-left:10px
</style>